<template>
	<view class="cu-steps">
		<view class="cu-item" 
			v-for="(item,index) in statusList" :key="index"
			:class="index>basics?'':'cur'" 
		>
			<text class="cuIcon-title"
			:class="index>basics?'':''"
			></text> 
			<view class="text-tip">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			status: {
				type: Number,
				default: 1
			},
			verify: {
				type: Boolean,
				default: false
			},
		},

		data() {
			return {
				verList: [{
					status: 1,
					name: '已拍下'
				}, {
					status: 2,
					name: '已付款'
				}, {
					status: 3,
					name: '已发货'
				}, {
					status: 4,
					name: '第三方检验'
				}, {
					status: 5,
					name: '第三方发货'
				}, {
					status: 6,
					name: '交易完成'
				}],
				basicsList: [{
					status: 1,
					name: '已拍下'
				}, {
					status: 2,
					name: '已付款'
				}, {
					status: 3,
					name: '已发货'
				}, {
					status: 6,
					name: '交易完成'
				}],
			}
		},
		computed: {
			statusList() {
				if (this.verify) {
					return this.verList;
				}
				return this.basicsList
			},
			basics() {
				let list = this.verify?this.verList: this.basicsList
				let index = list.findIndex(item => {
					return item.status == this.status
				})
				return index
			},
		}
	}
</script>

<style lang="scss" scoped>
	
.cu-steps{
	.cu-item{
		padding: 0 4rpx;
		.cuIcon-title{
			font-size: 40rpx;
			line-height: 40rpx;
			z-index: 1;
			position: relative;
			margin-bottom: 10rpx;
		}
		.text-tip{
			font-size: 20rpx;
		}
		&:not([class*="text-"]){
			color: #67D9E1;
		}
		&::before,&::after{
			border-bottom: 1px solid #67D9E1;
			left: calc(0px - 50%);
			width: 100%;
			top: 18rpx;
		}
		&.cur{
			color: #F1D446;
			.cuIcon-title::after{
				content: '';
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: rgba(241, 212, 70, 0.6);
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			&::before,&::after{
				border-bottom: 1px solid #F1D446;
			}
			.text-tip{
				color: #FFFFFF;
			}
		}
	}
	
}

</style>
